<template>
  <div class="factory-page" :style="siteContentViewHeight">
    <!-- 左侧客群导航 -->
    <div class="factory-navbar-wrap">
      <div class="nav-btn nav-btn__1" :class="{ 'is-active': groupName === 'mine' }" @click="changeGroup('mine')">
        <span> 我的客群 </span>
      </div>
      <div class="nav-btn nav-btn__2" @click="changeGroup('all')" :class="{ 'is-active': groupName === 'all' }">
        共享客群
      </div>
      <div
        class="nav-btn nav-btn__3"
        :class="{ 'is-active': groupName === 'template' }"
        @click="changeGroup('template')"
      >
        画像模板
      </div>
    </div>
    <div class="factory-container">
      <factory-customers-mine v-if="groupName === 'mine'" ref="factorymine"></factory-customers-mine>
      <factory-customers-all v-if="groupName === 'all'" ref="factoryall"></factory-customers-all>
      <factory-figure-template v-if="groupName === 'template'" ref="factorytemplate"></factory-figure-template>
    </div>
  </div>
</template>

<script>
import FactoryCustomersMine from './factory-customers-mine'
import FactoryCustomersAll from './factory-customers-all'
import FactoryFigureTemplate from './factory-figure-template'
export default {
  name: 'FactoryPage',
  components: { FactoryCustomersMine, FactoryCustomersAll, FactoryFigureTemplate },
  computed: {
    siteContentViewHeight() {
      return { height: this.$store.getters['common/siteContentViewHeight'] + 'px' }
    }
  },
  data() {
    return {
      groupName: 'mine' // mine all template
    }
  },
  created() {},
  watch: {},
  methods: {
    changeGroup(groupName) {
      // 改变分组
      this.groupName = groupName
      this.$nextTick(() => this.$refs[`factory${this.groupName}`].init())
    }
  }
}
</script>

<style lang="scss">
@import './factory-page.scss';
</style>
